<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>商品列表</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/goodslist.css">
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2367458_0c0z3dmzrfz8.css">
    </head>
    <body>
        <header>
            <div class="wrapper">
                <div class="haier-logo">
                    <a href="index.html"><img src="assets/images/haier2020_logo.png" alt=""></a>
                </div>
                <ul class="clear">
                    <li>
                        智能家庭
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        个人与家用产品
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        商用解决方案
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        购买与服务
                        <ul class="hidbox">
                            <li>
                                <a href="aftersale.html">服务支持</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        关于海尔
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="search-box">
                        <div class="search-item">
                            <i class="iconfont icon-fangdajing"></i>
                            <input type="text" placeholder="找点什么... ">
                        </div>
                        <a href="#"><i class="iconfont icon-gouwuche"></i></a>
                        <a href="sign.html"><i class="iconfont icon-yonghu-user"></i></a>
                </div> 
            </div>
    </header>

        <section class="goods">
            <!-- 顶部图片 -->
            <div class="banner">
                <div class="banner-text">
                    <h2>
                        全空间保鲜冰箱大盘点
                    </h2>
                    <p>健康生活 藏纳百鲜</p>
                </div>
                <img src="assets/images/glistbanner.png" alt="">
            </div>

            <!-- 目标页面选择 -->
            <div class="dest">
                <ul class="clear">
                    <li><a href="#">首页<i class="iconfont icon-icon1"></i></a></li>
                    <li><a href="#">冰箱<i class="iconfont icon-arrow-down"></i></a></li>
                </ul>
            </div>

            <!-- 冰箱产品合计数量 -->
            <div class="total">
                <span>冰箱</span>
                <span>共327个产品</span>
            </div>

            <!-- 冰箱种类导航 -->
            <nav class="clear">
                <div class="top">
                    <i>款式&nbsp;:</i>
                    <div class="text-left">
                        <span>对开门</span>
                        <span>十字对开门</span>
                        <span>多门</span>
                    </div>
                    <div class="text-right">
                        <span>三门</span>
                        <span>两门</span>
                        <span>单门</span>
                    </div>
                    <div class="duoxuan">
                        <span>多选</span>
                        <i>+</i>
                    </div>
                </div>
                <div class="middle">
                    <i>总容积&nbsp;:</i>
                    <div class="text-left">
                        <span>600升以上</span>
                        <span>501-600升</span>
                        <span>301-500升</span>
                    </div>
                    <div class="text-right">
                        <span>201-300升</span>
                        <span>101-200升</span>
                        <span>100升及以下</span>
                    </div>
                    <div class="duoxuan">
                        <span>多选</span>
                        <i>+</i>
                    </div>
                </div>
                <div class="bottom">
                    <i>其它选项&nbsp;:</i>
                    <ul>
                        <li><span>制冷方式</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>颜色</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>面板材质</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>面板材质</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>压缩机</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>面板材质</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>颜色</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>颜色</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>颜色</span><i class="iconfont icon-arrow-down"></i></li>
                        <li><span>面板材质</span><i class="iconfont icon-arrow-down"></i></li>
                    </ul>
                </div>

                <div class="screen">
                    <ul>
                        <li>综合</li>
                        <li>上市时间</li>
                        <li>人气</li>
                        <li>价格</li>
                        <li>
                            <input type="text" placeholder="最低价格">
                            <i>-</i>
                            <input type="text" placeholder="最高价格">
                        </li>
                    </ul>

                    <div class="choose">
                        <input type="checkbox" name="sort">智慧家电
                        <input type="checkbox" name="sort">智慧家电
                        <input type="checkbox" name="sort">已下市
                    </div>
                </div>
            </nav>
            
            <!-- 冰箱信息列表 -->
            <div class="prolistbox">
                <div class="product-box">
                    <div class="product-item">
                        <a href="goodsdetail.html">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="goodsdetail.html">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                    <div class="product-item">
                        <a href="#">
                            <img src="assets/images/product1.png" alt="">
                        </a>
                        <p>
                            <a href="#">486升风冷变频多门冰箱</a> 
                        </p>
                        <p>
                            BCD-486WFBG
                        </p>
                        <p>
                            <span>参考价:</span><i>¥5999</i>
                        </p>
                        <p>
                            <a href="#">1</a>家电商在售 
                            <i class="iconfont icon-liebiaoyekoubei"></i>
                            <a href="#">66</a>
                        </p>
                    </div>
                </div>

                <div class="like-box">
                    <h1>根据浏览猜您喜欢</h1>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="assets/images/likeimg.png" alt="">
                                <p>245升真空管太阳能热水器</p>
                            </a>
                            <p>Q-B-J-1-245/4.02/0.05-D/I6</p>
                            <p>参考价:¥5799</p>
                        </li>
                        <li>
                            <a href="#">
                                <img src="assets/images/likeimg.png" alt="">
                                <p>245升真空管太阳能热水器</p>
                            </a>
                            <p>Q-B-J-1-245/4.02/0.05-D/I6</p>
                            <p>参考价:¥5799</p>
                        </li>
                        <li>
                            <a href="#">
                                <img src="assets/images/likeimg.png" alt="">
                                <p>245升真空管太阳能热水器</p>
                            </a>
                            <p>Q-B-J-1-245/4.02/0.05-D/I6</p>
                            <p>参考价:¥5799</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 页码 -->
            <div class="page">
                <span><i class="iconfont icon-arrow-left"></i>上一页</span>
                <ul class="clear">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
                <a href="#"><span>下一页<i class="iconfont icon-zuoyoujiantou-copy-copy"></i></span></a>
            </div>
        </section>
        
        <footer>
            <div class="ft-wrapper">
                <div class="ft-list">
                    <ul>
                        <li>智慧家庭</li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                    </ul>
                    <ul>
                        <li>个人与家用产品</li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                    </ul>
                    <ul>
                        <li>商用解决方案</li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                    </ul>
                    <ul>
                        <li>购买与服务</li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                    </ul>
                    <ul>
                        <li>关于海尔</li>
                        <li><a href="">海尔品牌</a></li>
                        <li><a href="">海尔品牌</a></li>
                        <li><a href="">海尔品牌</a></li>
                    </ul>
                    <ul>
                        <li>友情链接</li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                    </ul>
                </div>

                <div class="ft-bottom">
                    <div class="b-left">
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                    </div>
                    <div class="b-middle">
                        <a href="">
                            鲁ICP备09096283号-1
                        </a>
                        <span>
                            |
                        </span>
                        <span>
                            © 2000-2021 Haier.com. All rights reserved.
                        </span>
                    </div>
                    <div class="b-right">
                        <span>
                            Haier 全球网站群 · 中国
                        </span>
                        <span>
                            关注海尔
                        </span>
                        <i class="iconfont icon-weixin"></i>
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>